<template>
  <!-- 抖音商品属性组件 -->
  <div v-loading="loading" element-loading-text="加载中">
    <span class="font-red font-w mar-l-20">※ 请设置抖音平台相关商品属性，发布/更新商品需要</span>

    <el-form label-position="right" class="pad-20" :model="propertyForm" :rules="rules" ref="propertyForm">
      <el-form-item label-width="130px" label="商品品牌：" prop="externalBrandId">
        <el-select class="width-300" v-model="propertyForm.externalBrandId">
          <el-option label="无" value=""></el-option>
          <el-option v-for="item in brandList" :key="item.thirdBrandId" :label="item.chineseName||item.englishName" :value="item.externalBrandId"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label-width="130px" label="减库存类型：" prop="reduceType">
        <el-select v-model="propertyForm.reduceType" placeholder="请选择店铺商品减库存类型" class="width-300">
          <el-option v-for="item in reduceTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <div class="font-red">注: 设置之后, 不会改变系统中减库存的处理方式</div>
      </el-form-item>

      <el-form-item label-width="130px" label="商品分类：" prop="douYinCategoryId">
        <el-cascader v-model="douYinCategoryIds" 
          :props="{ label: 'categoryName', value: 'douYinCategoryId' }" 
          :options="douYinCategoryList" 
          filterable
          clearable
          class="width-300">
        </el-cascader>
      </el-form-item>

      <el-form-item label-width="130px" label="运费模板：" prop="templateId">
        <el-select v-model="propertyForm.templateId" placeholder="请选择店铺商品运费模板" class="width-300" clearable>
          <el-option v-for="item in freightTemplateList" 
            :key="item.id" 
            :label="item.template_name" 
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label-width="130px" label="发货模式：" prop="douyinPresellType">
        <el-select v-model="propertyForm.douyinPresellType" placeholder="请选择店铺商品发货模式" @change="changePromiseDeliveryType" class="width-300" clearable>
          <el-option v-for="item in douyinPresellTypeList" :key="item.douyinPresellType" :label="item.name" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label-width="130px" label="承诺发货时间：" prop="promiseDeliveryType">
        <el-select v-model="propertyForm.promiseDeliveryType" placeholder="请选择店铺商品承诺发货时间" class="width-300" clearable :disabled="douyinPresellTypeDisable">
          <el-option v-for="item in douYinPromiseDeliveryTypeList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label-width="130px" label="7天无理由：" prop="douyinSupplySevenDayReturn">
        <el-select v-model="propertyForm.douyinSupplySevenDayReturn" placeholder="请选择店铺商品7天无理由" class="width-300" clearable>
          <el-option v-for="item in douyinSupplySevenDayReturnList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label-width="60px">
        <el-checkbox v-model="auditCommitFlag" true-label="2" false-label="1">
          <span>加入店铺时，同时提审（不勾选加入店铺时仅保存）</span>
        </el-checkbox>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer mar-b-10">
      <el-button @click="doClose">取消</el-button>
      <el-button type="primary" @click="doSave">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { listDouYinCategory } from '@/api/goods/dou-yin-category'
  import { listThirdBrand } from '@/api/goods/third-brand'
  import { saveThirdGoods, getFreightTemplate, doGetThirdGoodsById } from '@/api/third/thirdGoods'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 店铺id
      shopId: {
        type: String
      },
      // 商品对象
      goodsObj: {
        type: Object
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.init()
        }
      },
      shopId(val) {
        if (val) {
          this.initByShopId()
        }
      }
    },
    data() {
      return {
        // 抖音平台类型
        platformType: 1,
        // 商品属性对象
        propertyForm: {
          thirdGoodsId: '',
          enterpriseId: '',
          memberId: '',
          goodsId: '',
          shopId: '',
          reduceType: '',
          externalBrandId: '',
          douYinCategoryId: '',
          templateId: '',
          douyinPresellType: '',
          promiseDeliveryType: '',
          douyinSupplySevenDayReturn: '',
          douyinAuditCommit: ''
        },
        // 提审flag
        auditCommitFlag: false,
        // 分类model
        douYinCategoryIds: [],
        // 表单规则
        rules: {
          douYinCategoryId: [
            { required: true, message: '请选择商品类目', trigger: 'blur' }
          ],
          templateId: [
            { required: true, message: '请选择商品模板', trigger: 'blur' }
          ],
          promiseDeliveryType: [
            { required: true, message: '请选择承诺发货时间', trigger: 'blur' }
          ],
          douyinPresellType: [
            { required: true, message: '请选择发货模式', trigger: 'blur' }
          ],
          douyinSupplySevenDayReturn: [
            { required: true, message: '请选择7天无理由', trigger: 'blur' }
          ]
        },
        douyinSupplySevenDayReturnList: [
          { 'id': 0, 'name': '不支持' },
          { 'id': 1, 'name': '支持' },
          { 'id': 2, 'name': '支持（拆封后不支持）' }
        ],
        douyinPresellTypeList: [
          { value: 0, 'name': '现货发货' },
          { value: 1, 'name': '预售发货' },
          { value: 2, 'name': '阶梯发货' }
        ],
        douYinPromiseDeliveryTypeList: [
          { id: 2, name: '2天' },
          { id: 3, name: '3天' },
          { id: 5, name: '5天' },
          { id: 7, name: '7天' },
          { id: 10, name: '10天' },
          { id: 15, name: '15天' }
        ],
        reduceTypeList: [
          { id: 1, name: '拍下减库存' },
          { id: 2, name: '付款减库存' }
        ],
        brandList: [],
        // 运费模板列表
        freightTemplateList: [],
        douYinCategoryList: [],
        douyinPresellTypeDisable: true,
        loading: false
      }
    },
    created() {
      this.initByShopId()
    },
    mounted() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        const originData = this.$options.data()
        this.propertyForm = originData.propertyForm
        this.douYinCategoryIds = originData.douYinCategoryIds
        this.auditCommitFlag = originData.auditCommitFlag
        if (this.goodsObj.thirdGoodsId) {
          this.loading = true
          doGetThirdGoodsById({ thirdGoodsId: this.goodsObj.thirdGoodsId }).then(response => {
            if (response.isError) return
            this.loading = false
            const data = response.data
            Object.assign(this.propertyForm, data)
            this.propertyForm.templateId = parseInt(this.propertyForm.templateId)
            this.douyinPresellTypeDisable = this.propertyForm.douyinPresellType.toString() === ''
            this.auditCommitFlag = data.douyinAuditCommit === 2
            this.douYinCategoryIds = data.douYinCategoryId
          })
        } else {
          this.propertyForm.goodsId = this.goodsObj.goodsId
          this.propertyForm.enterpriseId = this.getEnterpriseId()
          this.propertyForm.memberId = this.getMemberId()
          this.propertyForm.platformType = this.platformType
          this.propertyForm.shopId = this.shopId
        }
      },
      // 根据店铺初始化
      initByShopId() {
        // 获取运费模板
        getFreightTemplate(this.platformType, this.shopId).then(response => {
          if (response.isError) return
          this.freightTemplateList = response.data
        })
        // 获取抖音分类
        listDouYinCategory({ shopId: this.shopId }).then(response => {
          if (response.isError) return
          this.douYinCategoryList = response.data
        })
        // 获取抖音品牌
        listThirdBrand({
          enterpriseId: this.getEnterpriseId(),
          memberId: this.getMemberId(),
          shopId: this.shopId,
          platformType: 1
        }).then(response => {
          if (response.isError) return
          this.brandList = response.data
        })
      },
      // 发货模式切换事件
      changePromiseDeliveryType() {
        this.douYinPromiseDeliveryTypeList = []
        if (this.propertyForm.douyinPresellType.toString() === '1') {
          this.douYinPromiseDeliveryTypeList.push(
            { id: 2, name: '2天' },
            { id: 3, name: '3天' },
            { id: 5, name: '5天' },
            { id: 7, name: '7天' },
            { id: 10, name: '10天' },
            { id: 15, name: '15天' }
          )
        } else {
          this.douYinPromiseDeliveryTypeList.push({ id: 2, name: '2天' })
        }
        this.propertyForm.promiseDeliveryType = ''
        this.douyinPresellTypeDisable = this.propertyForm.douyinPresellType.toString() === ''
      },
      // 关闭事件
      doClose() {
        this.$emit('callback', false)
      },
      // 保存事件
      doSave() {
        const douYinCategoryIds = this.douYinCategoryIds
        const douYinCategoryId = Array.isArray(douYinCategoryIds) ? douYinCategoryIds[douYinCategoryIds.length - 1] : douYinCategoryIds
        this.propertyForm.douYinCategoryId = douYinCategoryId
        this.$refs['propertyForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.propertyForm.douyinAuditCommit = this.auditCommitFlag.toString() === '2' ? 2 : 1
            saveThirdGoods(this.propertyForm).then(response => {
              this.loading = false
              if (response.isError) return
              this.$message({ type: 'success', message: '保存成功' })
              this.$emit('callback', true)
            })
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>